<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>likes</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="post-content-list">
        <div class="post-content theme-xiaolu">
            <div class="post-bubble-top"></div>
            <div class="post-bubble-middle">
                <div class="post-bubble-middle-inner">
                    <article>
                        <header>
                            <p style="text-align: center;">琵琶行</p>
                            <p>【作者】白居易 【朝代】唐</p>
                        </header>
                        <section>
                            <p>浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
                            <p>主人下马客在船，举酒欲饮无管弦。</p>
                            <p>醉不成欢惨将别，别时茫茫江浸月。</p>
                            <br>
                            <p>忽闻水上琵琶声，主人忘归客不发。</p>
                            <p>寻声暗问弹者谁，琵琶声停欲语迟。</p>
                            <p>移船相近邀相见，添酒回灯重开宴。</p>
                            <p>千呼万唤始出来，犹抱琵琶半遮面。</p>
                            <p>转轴拨弦三两声，未成曲调先有情。</p>
                            <p>弦弦掩抑声声思，似诉平生不得志。</p>
                            <p>低眉信手续续弹，说尽心中无限事。</p>
                            <p>轻拢慢捻抹复挑，初为《霓裳》后《六幺》。</p>
                            <p>大弦嘈嘈如急雨，小弦切切如私语。</p>
                            <p>嘈嘈切切错杂弹，大珠小珠落玉盘。</p>
                            <p>间关莺语花底滑，幽咽泉流冰下难。</p>
                            <p>冰泉冷涩弦凝绝，凝绝不通声暂歇。</p>
                            <p>别有幽愁暗恨生，此时无声胜有声。</p>
                            <p>银瓶乍破水浆迸，铁骑突出刀枪鸣。</p>
                            <p>曲终收拨当心画，四弦一声如裂帛。</p>
                            <p>东船西舫悄无言，唯见江心秋月白。</p>
                            <br>
                            <p>沉吟放拨插弦中，整顿衣裳起敛容。</p>
                            <p>自言本是京城女，家在虾蟆陵下住。</p>
                            <p>十三学得琵琶成，名属教坊第一部。</p>
                            <p>曲罢曾教善才服，妆成每被秋娘妒。</p>
                            <p>五陵年少争缠头，一曲红绡不知数。</p>
                            <p>钿头银篦击节碎，血色罗裙翻酒污。</p>
                            <p>今年欢笑复明年，秋月春风等闲度。</p>
                            <p>弟走从军阿姨死，暮去朝来颜色故。</p>
                            <p>门前冷落鞍马稀，老大嫁作商人妇。</p>
                            <p>商人重利轻别离，前月浮梁买茶去。</p>
                            <p>去来江口守空船，绕船月明江水寒。</p>
                            <p>夜深忽梦少年事，梦啼妆泪红阑干。</p>
                            <p>我闻琵琶已叹息，又闻此语重唧唧。</p>
                            <p>同是天涯沦落人，相逢何必曾相识！</p>
                            <p> 我从去年辞帝京，谪居卧病浔阳城。</p>
                            <p>浔阳地僻无音乐，终岁不闻丝竹声。</p>
                            <p>住近湓江地低湿，黄芦苦竹绕宅生。</p>
                            <p>其间旦暮闻何物？杜鹃啼血猿哀鸣。</p>
                            <p>春江花朝秋月夜，往往取酒还独倾。</p>
                            <p>岂无山歌与村笛？呕哑嘲哳难为听。</p>
                            <p>今夜闻君琵琶语，如听仙乐耳暂明。</p>
                            <p>莫辞更坐弹一曲，为君翻作《琵琶行》。</p>
                            <p>感我此言良久立，却坐促弦弦转急。</p>
                            <p>凄凄不似向前声，满座重闻皆掩泣。</p>
                            <p>座中泣下谁最多？江州司马青衫湿。</p>
                        </section>
                    </article>
                </div>
            </div>
            <div class="post-bubble-bottom"></div>
        </div>
    </div>
    <div class="likes-list">
        <div class="likes-item">
            <div class="count">6</div>
            <div class="progress-wrapper">
                <meter class="progress" value="6" min="0" max="1000" optimum="1" low="100" high="50"
                    onclick="onClick(this)"></meter>
            </div>
            <img src="img/likes/bq_qd.gif" alt="期待" class="img">
            <div class="text">期待</div>
        </div>
        <div class="likes-item">
            <div class="count">10</div>
            <div class="progress-wrapper">
                <meter class="progress" value="10" min="0" max="1000" optimum="1" low="100" high="50"
                    onclick="onClick(this)"></meter>
            </div>
            <img src="img/likes/bq_cz.gif" alt="超赞" class="img">
            <div class="text">超赞</div>
        </div>
        <div class="likes-item">
            <div class="count">2</div>
            <div class="progress-wrapper">
                <meter class="progress" value="2" min="0" max="1000" optimum="1" low="100" high="50"
                    onclick="onClick(this)"></meter>
            </div>
            <img src="img/likes/bq_wg.gif" alt="无感" class="img">
            <div class="text">无感</div>
        </div>
        <div class="likes-item">
            <div class="count">999</div>
            <div class="progress-wrapper">
                <meter class="progress" value="999" min="0" max="1000" optimum="1" low="100" high="50"
                    onclick="onClick(this)"></meter>
            </div>
            <img src="img/likes/bq_lj.gif" alt="雷囧" class="img">
            <div class="text">雷囧</div>
        </div>
        <div class="likes-item">
            <div class="count">25</div>
            <div class="progress-wrapper">
                <meter class="progress" value="25" min="0" max="1000" optimum="1" low="100" high="50"
                    onclick="onClick(this)"></meter>
            </div>
            <img src="img/likes/bq_lg.gif" alt="路过" class="img">
            <div class="text">路过</div>
        </div>
    </div>
    <script>
        function onClick(ctx) {
            ctx.value += Math.floor(Math.random() * 100) + 1;
            ctx.parentElement.previousElementSibling.innerText = ctx.value;
        }
    </script>
</body>

</html>